let imga = document.querySelectorAll(".imga");
let h4 = document.querySelectorAll("h4");
let tit = document.querySelectorAll(".title");
let bar = document.querySelectorAll(".progress-bar");
let span1 = document.querySelectorAll(".span1");
let span2 = document.querySelectorAll(".span2");
let cur = document.querySelectorAll(".cur");
let price = document.querySelectorAll(".price");
let btn = document.querySelector("#btn");
let q = 1;
function a(){
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var res = JSON.parse(xmlhttp.responseText);
            console.log(res.shop[0].pic);
            for(let i = 0;i < res.shop.length;i++){
                imga[i].src = res.shop[i].pic;
                h4[i].innerHTML = res.shop[i].bt;
                tit[i].innerHTML = res.shop[i].title;
                span1[i].innerHTML = res.shop[i].desca;
                span2[i].innerHTML = res.shop[i].descb;
                cur[i].innerHTML = res.shop[i].cur;
                price[i].innerHTML = res.shop[i].price;
                bar[i].style.width = res.shop[i].desca;
            }
        }
    };
    xmlhttp.open("GET","json/nr" + q + ".json",true);
    xmlhttp.send();
}
a();
btn.addEventListener("click",function(){
    if (q >= 4){
        q = 1;
    }else {
        q++;
    }
    a();
});